<template>
  <nut-tabbar @tab-switch="tabSwitch1" type="card" :tabbar-list="tabList1" class="footer-bottom" v-if="show"></nut-tabbar>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        tabList1: [{
            'tabTitle': '数据',
            'curr': true,
            'icon': require('../../assets/footer/btn_1.png'),
            'activeIcon': require('../../assets/footer/active_1.png')
          },
          {
            'tabTitle': '代理列表',
            'curr': false,
            'icon': require('../../assets/footer/btn_2.png'),
            'activeIcon': require('../../assets/footer/active_2.png')
          },
          {
            'tabTitle': '酒店列表',
            'curr': false,
            'icon': require('../../assets/footer/btn_3.png'),
            'activeIcon': require('../../assets/footer/active_3.png')
          }
        ]
      }
    },
    watch: {
      $route(to, from) {
        this.show = true
        if (to.path == '/login' || to.path == '/login2') {
          this.show = false
        } else if (to.path == '/') {
          for (let i in this.tabList1) {
            this.tabList1[i].curr = false
          }
          this.$set(this.tabList1[0], 'curr', true)

        } else if (to.path == '/bonusAgent') {
          for (let i in this.tabList1) {
            this.tabList1[i].curr = false
          }
          this.$set(this.tabList1[1], 'curr', true)
        } else if (to.path == '/salesAgent') {
          for (let i in this.tabList1) {
            this.tabList1[i].curr = false
          }
          this.$set(this.tabList1[2], 'curr', true)
        }

      }
    },
    mounted() {
      if (this.$route.path == "/login" || this.$route.path == "/login2") {
        this.show = false
      }
    },
    methods: {
      tabSwitch1: function(value, index) {
        if (index == 0) {
          if (this.$route.path != "/") {
            this.$router.push("/")
          }

        } else if (index == 1) {
          if (this.$route.path != "/bonusAgent") {
            this.$router.push("/bonusAgent")
          }
        } else {
          if (this.$route.path != "/salesAgent") {
            this.$router.push("/salesAgent")
          }
        }
        console.log(index);
      },
    }
  }
</script>

<style lang="less">
  .footer-bottom {
    width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
  }

  .icon-box .icon {
    width: 21px !important;
    height: 21px !important;
  }

  .tabbar-nav {
    padding-top: 2px !important;
  }

  .nut-tabbar {
    height: 48px !important;
    margin-top: 0 !important;
  }

  .curr {
    color: #1677FF !important;
  }
</style>
